import React, { FC } from 'react'
import { Outlet } from 'react-router-dom'
import { Layout, Spin } from 'antd'
const { Header, Footer, Content } = Layout
import useLoadUserData from '../hooks/useLoadUserData'
import UserInfo from '../components/UserInfo'
import Logo from '../components/Logo'
import useNavPage from '../hooks/useNavPage'
import styles from './MainLayout.module.scss'

const MainLayout: FC = () => {
    const { waitingUserData } = useLoadUserData()
    useNavPage(waitingUserData)
    return (
        <Layout>
            <Header className={styles.header}>
                <div className={styles.left}>
                    <Logo />
                </div>
                <div className={styles.right}>
                    <UserInfo />
                </div>
            </Header>
            <Content className={styles.main}>
                {waitingUserData ? (
                    <div style={{ textAlign: 'center', marginTop: '60px' }}>
                        <Spin />
                    </div>
                ) : (
                    <Outlet />
                )}
            </Content>
            <Footer className={styles.footer}>
                本科毕业设计项目 - 低代码问卷编辑器 &copy;2025 - present. Create by 滕轶男
            </Footer>
        </Layout>
    )
}

export default MainLayout
